<template>
	<view class="content">
		<view class="head" :style="headBc">
			<view class="company">{{vipCardInfo.company}}</view>
			<view class="cardNum">
				{{vipCardInfo.cardNo}}
			</view>
		</view>
		<view class="imageView">
			<image style="width: 100%; height: 100%;" mode="scaleToFill"  :src="contentImg"
			                        @error=""></image>

		</view>
		<view class="buyerView flex">
			<view class="flex">
				<view style="margin-left: 20rpx;">
					<u-checkbox-group
						v-model="checkboxValue1"
						placement="column"
		
					>
						<u-checkbox
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in checkboxList1"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="readAgree flex">阅读并同意<a @click="buyerArticle" class="buyerArticle">《购买协议》</a></view>
			</view>
			<view class="flex">
				<view class="share">
					<button open-type="share" class="shareButton">分享</button>
				</view>
				<view class="buyerBtn" @click="goBuyer">购买</view>
			</view>
		</view>
		<u-popup :show="show" mode="center"  @close="confirmRead" @open="">
		        <view class="flex alPopup">
					<view class="buyerTitle">购买协议</view>
		            <view v-html="content" style="height: 1000rpx;overflow-y: auto;"></view>
					<view class="sureBtn" @click="sureBtn">确定</view>
		        </view>
		</u-popup>
	
	</view>
</template>

<script>
	import http from '@/apis/http.js'
	import base from '@/config/base.js'
	export default {
		data() {
			return {
				vipCardInfo:{},
				contentImg : base.baseUrl+'uploads/20230527/2e6dc15b1f5a79ebb3de0e7bf6a70ee7.png',
				headBc:'background:url('+base.baseUrl+'/uploads/20230529/ca0f10bc3b6b86a8773dcd088aca8e90.jpg) no-repeat 100%/cover;',
				show:false,
				content:'asdasdasdasd',
				checkboxValue1:[],
				checkboxList1: [{
						name: '',
					},
				],
				topFixed : {
					topFixed : true,
					flex : true,
					topFixedScroll : false,
				}
			}
		},
		methods: {
			buyerArticle(){
				this.show = true;
				this.getBuyerArticle()
			},
			confirmRead(){
				this.show = false;
			},
			goBuyer(){
				if(this.checkboxValue1.length < 1){
					uni.showToast({
						icon:'none',
						title:'请勾选协议',
					})
					return false;
				}
				// #ifdef MP-WEIXIN
				let userinfo = uni.getStorageSync('userinfo');
				if(!userinfo.wx_open_id){
						uni.login({
						  provider: 'weixin',
						  success: function (loginRes) {
							if(loginRes.code){
								http.POST('mini_program/getUserInfo',{code:loginRes.code}).then(res=>{
									if(res.code == 1){
										let openid = res.data
										// 获取支付
										this.prevPay(openid);
									}else{
										uni.showToast({
											title:'支付失败',
											icon:'none'
										})
									}
								})
							}else{
								uni.showToast({
									title:'支付失败',
									icon:'none'
								})
							}
						  }
						});
				}else{
					this.prevPay(userinfo.wx_open_id)
				}
				
				// #endif
				// #ifndef MP-WEIXIN 
				this.appPay()
				// #endif
			},
			getVipCardBaseInfo()
			{
				http.POST('vip_card/cardInfo').then(res=>{
					this.vipCardInfo = res.data
				})
			},
			getBuyerArticle(){
				http.POST('article/buyerArticle').then(res=>{
					this.content = res.data.content
				})
			},
			sureBtn(){
				this.show = false;
			},
			goBack(){
				uni.navigateBack()
			},
			prevPay(openid){
				http.POST('order/buyerVip',{openid:openid}).then(res=>{
					if(res.code == 1){
						wx.requestPayment
						(
							{
								"timeStamp": res.data.timeStamp,
								"nonceStr": res.data.nonceStr,
								"package": res.data.package,
								"signType": "MD5",
								"paySign": res.data.paySign,
								"success":function(res){
									//支付成功跳转页面
									// self.$Router.push
									uni.navigateTo({
										url:'/pages/vipCard/vipCard'
									})
								},
								"fail":function(res){
	　　　　　　　　　　　　　　　　　　　　　　　　//支付失败弹提示
									uni.showToast({
										title: '支付失败',
										icon: "none",
										duration: 2000
									});
								},
								"complete":function(res){}
							}
						)
					}else{
						uni.showToast({
							title:'支付失败',
							icon:'none'
						})
					}
				})
			},
			appPay(){
				uni.showToast({
					title:'联系客服或小程序购买',
					icon:'none'
				})
			}
			
		},
		onPageScroll(e){
			if(e.scrollTop > 80){
				this.topFixed.topFixedScroll = true
				
			}else{
				this.topFixed.topFixedScroll = false
			}
		},
		created() {
			this.getVipCardBaseInfo()
		}
	}
</script>

<style>
	.imageView{
		width: 100%; height: 2500rpx;
	}
	.flex{display: flex;}
	
	.topFixed {
		position: sticky;
		z-index: 1000;
		background: none;
		padding: 70rpx 0 20rpx 20rpx;
	}
	
	.buyerView { width: 100%; position: fixed; bottom: 0; padding: 30rpx 70rpx 20rpx 70rpx; flex-direction: column; background-color: #fff; }
	.share { padding: 20rpx 50rpx; background-color: #f8d146; border-radius: 50rpx;}
	.buyerBtn{ color: #fff; padding: 20rpx 150rpx; background-color: #5db9a0; border-radius: 50rpx; margin-left: 30rpx;}
	.readAgree { font-size: 22rpx;}
	.buyerArticle { color: #75aad4;}
	.topFixedScroll { background-color: #5db9a0; color: #fff;}
	.head {
		height: 600rpx;
		position: relative;
	}
	.company { 
		position: absolute; top: 240rpx; left: 100rpx;
		color: #e7a54f;  font-weight: bold; font-size: 35rpx;
	}
	.cardNum { position: absolute; top: 300rpx; font-size: 50rpx; color: #fff; left: 100rpx; }
	.alPopup {  flex-direction: column; padding: 20rpx; margin-top: 20rpx; width: 600rpx; justify-content: center;}
	.alPopup .buyerTitle { font-weight: bold; text-align: center; margin-bottom: 20rpx; }
	.alPopup .sureBtn {
		text-align: center;
		color: blue;
		padding: 15rpx 0;
		margin-top: 20rpx;
	}
	button {
		line-height: 20rpx;
		height: 40rpx;
		font-size: 35rpx;
		background-color: transparent;
		border: none;
		margin-top: 10rpx;
		color: #fff;
	}
	button::after {
	  border: none;
	  
	}
</style>
